  <template>
  <div class="page-home">
    <div class="page-header">
      <headerPageVue />
    </div>
    <div class="page-content">
      <div style="width: 100%; display: flex; justify-content: space-between">
        <!-- name="slide-left" -->
        <!-- 总览页面左侧 -->
        <template v-if="currentTab === 'overview'">
          <generalLeftPage />
        </template>
        <!-- 总览页面左侧 -->
        <template v-else-if="currentTab === 'speed'">
          <rotationalLeft />
        </template>
        <!-- 温区页面左侧 -->
        <template v-else-if="currentTab === 'warmRegion'">
          <warmLeft />
        </template>
        <!-- name="slide-right" -->
        <!-- 总览页面右侧 -->
        <template v-if="currentTab === 'overview'">
          <generalRightPage />
        </template>
        <!-- 转速页面右侧 -->
        <template v-else-if="currentTab === 'speed'">
          <rotationalRight />
        </template>
        <!-- 温区页面右侧 -->
        <template v-else-if="currentTab === 'warmRegion'">
          <warmRight />
        </template>
      </div>
    </div>
    <div class="page-content-right"></div>
    <div class="page-content-left"></div>
    <div class="page-footer">
      <div class="page-footer-tab">
        <div
          :class="{ active: currentTab === 'overview' }"
          @click="setTab('overview')"
        >
          总览
        </div>
        <div
          :class="{ active: currentTab === 'warmRegion' }"
          @click="setTab('warmRegion')"
          class="warm-region"
        >
          温区监控
        </div>
        <div
          :class="{ active: currentTab === 'speed' }"
          @click="setTab('speed')"
        >
          转速
        </div>
      </div>
    </div>
  </div>
</template>


  <script setup>
import { ref } from "vue";
import generalLeftPage from "./components/generalView/leftPage.vue";
import generalRightPage from "./components/generalView/rightPage.vue";
import rotationalLeft from "./components/rotationalSpeed/leftPage.vue";
import rotationalRight from "./components/rotationalSpeed/rightPage.vue";
import warmLeft from "./components/warmRegion/leftPage.vue";
import warmRight from "./components/warmRegion/rightPage.vue";
import headerPageVue from "./components/headerPage.vue";

const currentTab = ref("overview");

const setTab = (tab) => {
  currentTab.value = tab; // 更新当前选中的标签
};
</script>


<style lang="scss" scoped>
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.5s ease;
}
.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s ease;
}
.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
}

.page-home {
  width: 100%;
  height: 100vh;
  position: relative;
  background: transparent;
  .page-header {
    width: 100%;
    height: 113px;
    z-index: 99;
  }
  .page-content-left {
    width: 376px;
    height: 1080px;
    background: url("../../assets/images/bgc-left.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .page-content-right {
    width: 376px;
    height: 1080px;
    background: url("../../assets/images/bgc-right.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
  .page-content {
    width: 100%;
    position: absolute;
    top: 80px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
  }

  .page-footer {
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    background-image: url("../../assets/images/bgc-footer.png");
    background-size: 100% 100%;
    .page-footer-tab {
      width: 302px;
      height: 22px;
      position: fixed;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      font-family: "PangMenZhengDao";
      font-size: 24px;
      cursor: pointer;
      .warm-region {
        margin-top: -6px;
      }
    }
    /* 默认选中状态的样式 */
    .page-footer-tab div.active {
      background: linear-gradient(180deg, #ffffff 0%, #73c0ff 90%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* 非选中状态的样式 */
    .page-footer-tab div:not(.active) {
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>